import React, {useState, useEffect} from 'react'
import MySelectOptions from '@/component/selectOption/MySelectOptions'
import {handleAttendUpdate} from '@/store2/actions/attend'
import {handleRole} from '@/store2/actions'
import {useDispatch, useSelector} from 'react-redux'
import approved from '@/common/approved'
import leaveType from '@/common/leaveType'
import {
  Button,
  Form,
  Input,
  DatePicker
} from 'antd'
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

export default props => {
  const dispatch = useDispatch()
  const name = useSelector(sotre =>sotre.user.info.name)
  const department = useSelector(sotre =>sotre.user.info.department)
  // const [name, setName] = useState('夏海峰')
  // const [department, setDepartment] = useState('HTML5')
  const [times, setTimes] = useState('')
  const [flag, setFlag] = useState(0)
  const count = useSelector(sotre => sotre.attend.count)

  useEffect(() => {
    setFlag(flag + 1)
    return () => undefined
  }, [count])

  useEffect(() => {
    flag > 1 && props.history.goBack()
    return undefined
  }, [flag])

  useEffect(() => {
    dispatch(handleRole())
    return undefined
  },[])

  const onFinish = (fieldsValue) => {
    fieldsValue.name = name
    fieldsValue.department = department
    fieldsValue.times = times
    dispatch(handleAttendUpdate(fieldsValue))
  };
  function onChange(value, dateString) {
    let times = ((new Date(dateString[1]).getTime() - new Date(dateString[0]).getTime()) / 1000 / 3600 / 8).toFixed(2)
    times === 'NaN' ? setTimes('') : setTimes(times + 'h')
  }
  
  return (
    <div className="my-add-leave">
      <Form
        {...layout}
        name="basic"
        onFinish={onFinish}
      >
        <Form.Item
          label="姓名"
          name="name"
        >
        <div>{name}</div>
        </Form.Item>
        <Form.Item
          label="部门"
          name="department"
        >
        <div>{department}</div>
        </Form.Item>
        <Form.Item
          label="审批人"
          name="approved"
          rules={[
            {
              required: true,
              message: '必填字段',
            },
          ]}
        >
          <MySelectOptions cates={approved} />
          {/* <span>请选择总监或总监以上的审批人</span> */}
        </Form.Item>
        <Form.Item
          label="请假事由"
          name="type"
          rules={[
            {
              required: true,
              message: '必填字段',
            },
          ]}
        >
          <MySelectOptions cates={leaveType} />
        </Form.Item>
        <Form.Item
          label="时间"
          name="time"
          rules={[
            {
              required: true,
              message: '必填字段',
            },
          ]}
        >
         <RangePicker 
          showTime 
          format="YYYY-MM-DD HH:mm"
          onChange={onChange}
           />
        </Form.Item>
        <Form.Item
          label="工"
          // name="times"
          rules={[
            {
              required: true,
              message: '必填字段',
            },
          ]}
        >
          <Input placeholder="8小时/天" value={times} style={{maxWidth: '30%'}} disabled={true}/>
        </Form.Item>
        <Form.Item
          label="备注"
          name="remarks"
          rules={[
            {
              required: true,
              message: '必填字段',
            },
          ]}
        >
        <TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button style={{marginLeft: 30}} onClick={() => props.history.goBack()} >
            返回
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}